﻿<template>
  <swiper :options="swiperOption" class="swiper_btn">
    <swiper-slide v-for="slide in swiperSlides">
		<div class="wrap_img">
			<img src="../../../static/img/login_bg.jpg">
		</div>
	</swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
  export default {
    name: 'carrousel1',
    data() {
      return {
        swiperOption: {
          autoplay: 3500,
          setWrapperSize :true,
          pagination : '.swiper-pagination',
          paginationClickable :true,
          mousewheelControl : true,
          observeParents: true,
        },
        swiperSlides: [1, 2, 3, 4, 5]
      }
    },
    mounted() {
      setInterval(() => {
        //console.log('simulate async data11')
        let swiperSlides = this.swiperSlides
        if (swiperSlides.length < 5) swiperSlides.push(swiperSlides.length + 1)
      }, 3000)
    }
  }
</script>
<style scoped>
  .top_nav_Scroll{
    height:13rem;
  } 
  .wrap_img {
    width: 100%;
  }
  .wrap_img img{
      display:block;
  } 
  .wrap_img_dot {
  
  }
  .mar_top_1 {
    margin-top: 0.3rem
  }
  .wrap_img_box_last_list {
    color: #9f5c2f;
    line-height: 1;
    font-size: 0.4rem;
    display: flex;
    padding-left:4%;
    padding-right:4%;
    justify-content:space-between;
  }
  .wrap_img_box_list {
    color: #9f9f9f;
    font-size: 0.5rem;
    padding-left: 4%;
    text-align: left;
    line-height: 1.2;
  }
  .wrap_img_box_name {
    font-size: 0.5rem;
    margin-top: 0.575rem;
    margin-bottom: 0.35rem;
    line-height: 1;
    font-weight: 600;
    text-align: left;
    padding-left: 5%;
  } 
  .swiper-button-prev {
    user-select: none;
    width: 4.5vw;
    background-size: contain;
    background-image: url("../../../static/img/nav_scroll/nav_left.png");
  }
  .swiper-button-next {
    user-select:none;
    width: 4.5vw;
    background-size: contain;
    background-image: url("../../../static/img/nav_scroll/nav_right.png");
  } 
  .swiper_btn {
    width:100%;
  }
  .wrap_img {
    width: 100%;
    height: 12.85rem;
    display: flex;
    justify-content: space-between;
  }
  .wrap_img_box{
		width:35vw;
		height:8.2rem;
		background-color:#fff;
		box-shadow:0 0 8px 2px rgba(181, 175, 175, 0.4);
		border-radius:1vw;
  }
  .wrap_img_box img{
    display:block;
    width:100%;
    height:4.2rem;
  }
</style>